<template>
	<view style="position: relative">
		<view class="addPerson">
			<view v-for="(item, index) in list" :key="index">
				<view class="item" v-if="item.configType == '00'">
					<view>
						<text :class="item.isNeed == '00' ? 'isNeed' : 'need'">*</text>
						{{item.configName}}
					</view>
					<input v-if="item.configName == '手机号码' || item.configName == '身份证号'" 
						type="number"
						:maxlength="item.configName == '手机号码' ? '11' : '18'"
						placeholder="请填写"
						v-model="item.content"
						@input="keyUp(item)"
						placeholder-style="color:rgba(102, 100, 93, 0.5)" />
					<input v-else type="text" maxlength="25" placeholder="请填写" placeholder-style="color:rgba(102, 100, 93, 0.5)" v-model="item.content" @input="keyUp(item)" />
				</view>
				<view class="item" v-else>
					<view>
						<text :class="item.isNeed == '00' ? 'isNeed' : 'need'">*</text>
						{{item.configName}}
					</view>
					<view class="choose">
						<view v-for="(_item, _index) in item.choose" :key="_index">
							<img :src="_item === item.checked ? chooseRadio : radio " @click="handle(item, _item)" />
							<text>{{_item}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button class="tj" :disabled="disabled" @click="save">保存</button>
		</view>
	</view>
</template>

<script>
	import http from '@/common/request.js';
	export default {
		data() {
			return {
				disabled: false,
				activityId: '',
				list: [],
				radio: 'https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/upload/radio.png',
				chooseRadio: 'https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/upload/chooseRadion.png',
				related_person: {},
				content: '',
				relatedPerson: [],
				personId: '',
				id: '',
				sessionId: '',
				stop: false
			}
		},
		mounted() {
			this.detail()
		},
		onLoad(option) {
			this.activityId = option.activityId;
			this.personId = option.personId;
			this.sessionId = option.sessionId;
		},
		methods: {
			handle(item, _item) {
				item.checked = _item
			},
			info(item, index) {
				item.content = this.content
			},
			keyUp(item) {
				const {
					configName,
					content
				} = item;
				let value = content;
				if (configName === '手机号码') {
					value = content.replace(/\D*/ig, '');
				}
				if (configName === '身份证号') {
					value = content.replace(/\D*/ig, '');
					// value = content.replace(/[a-w|y-z|A-W|Y-Z]/ig, '');
				}
				setTimeout(r => {
					item.content = value;
				}, 0)
			},
			add() {
				uni.navigateTo({
					url: '/activity/info/addPerson',
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			save() {
				this.disabled = true
				this.relatedPerson = []
				this.list.forEach((item) => {
					if (item.configType == '00') {
						let obj = {
							configName: item.configName,
							content: item.content,
							choose: item.choose || [],
							isNeed: item.isNeed,
							configType: item.configType,
							activityParticipantId: item.activityParticipantId
						}
						this.relatedPerson.push(obj)
					} else {
						let obj = {
							configName: item.configName,
							content: item.checked,
							choose: item.choose || [],
							checked: item.checked,
							isNeed: item.isNeed,
							configType: item.configType,
							activityParticipantId: item.activityParticipantId
						}
						this.relatedPerson.push(obj)
					}
				});

				for (let item of this.relatedPerson) {
					if (item.isNeed == '00' && item.content == '') {
						uni.showToast({
							title: '请填写' + item.configName,
							icon: 'none'
						})
						this.disabled = false
						return;
					}
				}

				if (this.personId) { // 修改
					http('/api/cusActivityAssociatedUser', {
						data: {
							id: this.id,
							relatedPerson: JSON.stringify(this.relatedPerson),
						},
						method: 'PUT'
					}).then(
						result => {
							if (result.code == '200') {
								this.disabled = false
								// uni.navigateTo({
								// 	url: '/activity/info/signUp?activityId=' + this.activityId + '&sessionId=' + this.sessionId,
								// 	animationType: 'pop-in',
								// 	animationDuration: 200
								// });
								uni.navigateBack({
									delta: 1,
									animationType: 'pop-out',
									animationDuration: 200
								});
							}
						}
					);
				} else { // 新增
					http('/api/cusActivityAssociatedUser', {
						data: {
							activityId: this.activityId,
							relatedPerson: JSON.stringify(this.relatedPerson),
						},
						method: 'POST'
					}).then(
						result => {
							if (result.code == '200') {
								this.disabled = false
								// uni.navigateTo({
								// 	url: '/activity/info/signUp?activityId=' + this.activityId + '&sessionId=' + this.sessionId,
								// 	animationType: 'pop-in',
								// 	animationDuration: 200
								// });
								uni.navigateBack({
									delta: 1,
									animationType: 'pop-out',
									animationDuration: 200
								});
							}
						}
					);
				}
			},
			detail() {
				if (!this.personId) {
					http('/api/activity/getKeys', {
						data: {
							activityId: this.activityId
						},
						method: 'GET'
					}).then(
						result => {
							if (result.code == '200') {
								const list = result.data || []
								list.forEach((item) => {
									item.content = '';
									item.configName = item.configName || '';
									item.choose = item.choose || [];
									item.isNeed = item.isNeed || '';
									item.configType = item.configType || '';
									item.activityParticipantId = item.activityParticipantId || '';
									if (item.configType == '01') {
										item.checked = '';
									}
								})
								this.$set(this, 'list', list)
							}
						}
					);
				} else { // 修改回显
					http('/api/cusActivityAssociatedUser/' + this.personId, {
						data: {},
						method: 'GET'
					}).then(
						result => {
							if (result.code == '200') {
								this.id = result.data.id
								this.$set(this, 'list', JSON.parse(result.data.relatedPerson))
							}
						}
					);
				}

			}
		}
	}
</script>

<style scoped lang="less">
	.addPerson {
		min-height: 100vh;
		background: #fff;
		padding: 24rpx;

		.item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid rgba(102, 100, 93, 0.06);
			padding: 24rpx 0;
			font-size: 30rpx;

			.isNeed {
				color: red;
				width: 20rpx;
				margin-right: 12rpx;
			}

			.need {
				color: #fff;
				width: 20rpx;
				margin-right: 12rpx;
			}

			.choose {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				img {
					width: 36rpx;
					height: 36rpx;
					margin: 0 20rpx 0 80rpx;
				}
			}

			input {
				border: none;
				outline: none;
				color: rgba(102, 100, 93, 1);
				text-align: right;
			}

			text {
				color: rgba(102, 100, 93, 1);
			}
		}
	}

	.btn {
		position: fixed;
		bottom: 36rpx;
		text-align: center;
		left: 24rpx;
		right: 24rpx;

		.tj {
			height: 82rpx;
			line-height: 82rpx;
			background: #FACC6B;
			border-radius: 12rpx;
			font-size: 30rpx;
			color: #66645D;
			margin-top: 36rpx;
		}
	}
</style>
